<template>
  <div class="container">

    <div class="tabsWrapper">
      <el-scrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper">
        <el-tabs v-model="activeTab" type="vertical" tab-position="left">
          <el-tab-pane v-for="(tab, index) in tabs"
                       :label="tab.label"
                       :name="tab.name"
                       :key="index" />
        </el-tabs>
      </el-scrollbar>
    </div>

    <div class="cardsWrapper">
      <div class="search-wrapper">
        <el-input
            v-model="searchText"
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            clearable
            @clear="handleClear"
            @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-pagination
          background
          @current-change="handlePageChange"
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="filteredCards.length"
          class="pagination"
      >
      </el-pagination>

      <el-card
          v-for="(card, index) in currentCards"
          :key="index"
          class="box-card"
      >
        <div class="card-content">
          <div class="image-wrapper">
            <img :src="card.image" class="card-image" alt="Card Image" />
          </div>
          <div class="text-wrapper">
            <div class="card-title">{{ card.content }}</div>
            <div class="card-metadata">{{ card.address }}</div>
            <div class="card-metadata">{{ card.contact }}</div>
            <div class="card-metadata">{{ card.description }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import logo from '@/assets/logo.png'

export default {
  setup() {
    const tabs = ref([
      { label: 'All',name: ['all'] },
      { label: '安徽', name: ['1'], },
      { label: '北京', name: ['2'],},
      { label: '重庆', name: ['3'], },
      { label: '福建', name: ['4'], },
      { label: '甘肃', name: ['5'], },
      { label: '广东', name: ['6'], },
      { label: '广西', name: ['7'], },
      { label: '贵州', name: ['8'], },
      { label: '海南', name: ['9'], },
      { label: '河北', name: ['10'], },
      { label: '黑龙江', name: ['11'], },
      { label: '河南', name: ['12'], },
      { label: '湖北', name: ['13'], },
      { label: '湖南', name: ['14'], },
      { label: '江苏', name: ['15'], },
      { label: '江西', name: ['16'], },
      { label: '吉林', name: ['17'], },
      { label: '辽宁', name: ['18'], },
      { label: '内蒙古', name: ['19'], },
      { label: '宁夏', name: ['20'], },
      { label: '青海', name: ['21'], },
      { label: '山东', name: ['22'], },
      { label: '山西', name: ['23'], },
      { label: '陕西', name: ['24'], },
      { label: '上海', name: ['25'], },
      { label: '四川', name: ['26'], },
      { label: '台湾', name: ['27'], },
      { label: '天津', name: ['28'], },
      { label: '香港', name: ['29'], },
      { label: '新疆', name: ['30'], },
      { label: '西藏', name: ['31'], },
      { label: '云南', name: ['32'], },
      { label: '浙江', name: ['33'], },
    ]);
    const cards = ref([
      { content: '合肥市立医院',
        tabs: ['1'],
        image:logo,
        address:"安徽省合肥市长江西路530号",
        contact:"电话：0551-65129120",
        description:"",
      },
      { content: '中国科学技术大学附属第一医院',
        tabs: ['1'],
        image:logo,
        address:"安徽省合肥市逍遥津路17号",
        contact:"电话：0551-65161114",
        description:"",
      },
      { content: '北京协和医院',
        tabs: ['2'],
        image:logo,
        address:"北京市东城区帅府园1号",
        contact:"电话：010-65123891",
        description:"",
      },
      { content: '第一军医大学附属西南医院',
        tabs: ['3'],
        image:logo,
        address:"重庆市渝北区黄山大道中段30号",
        contact:"电话：023-68754040",
        description:"",
      },
      { content: '西南医科大学附属第一医院',
        tabs: ['3'],
        image:logo,
        address:"重庆市渝中区大坪正街9号",
        contact:"电话：023-89011618",
        description:"",
      },
      { content: '福建医科大学附属协和医院',
        tabs: ['4'],
        image:logo,
        address:"福建省福州市仓山区高林北路88号",
        contact:"电话：0591-87830001",
        description:"",
      },
      { content: '福建医科大学附属第一医院',
        tabs: ['4'],
        image:logo,
        address:"福建省福州市鼓楼区湖东路66号",
        contact:"电话：0591-83353901",
        description:"",
      },
      { content: '兰州大学第二医院',
        tabs: ['5'],
        image:logo,
        address:"甘肃省兰州市城关区安宁东路82号",
        contact:"电话：0931-8945863",
        description:"",
      },
      { content: '西北民族大学附属医院',
        tabs: ['5'],
        image:logo,
        address:"甘肃省兰州市城关区南滨河中路368号",
        contact:"电话：0931-8814745",
        description:"",
      },
      { content: '大连市海事大学附属医院',
        tabs: ['18'],
        image:logo,
        address:"辽宁省大连市甘井子区东北路9号",
        contact:"电话：0411-84805555",
        description:"简介：是一所综合性医院，属于大连海事大学，并为学生、教职工及周边居民提供综合医疗服务。涵盖常见的科室和专业领域，如内科、外科、妇产科等。",
      },
      { content: '中山大学附属第一医院',
        tabs: ['6'],
        image:logo,
        address:"广东省广州市越秀区中山二路58号",
        contact:"电话：020-87755766",
        description:"",
      },
      { content: '广州医科大学附属第一医院',
        tabs: ['6'],
        image:logo,
        address:"广东省广州市越秀区中山二路11号",
        contact:"电话：020-83063699",
        description:"",
      },
      { content: '广西医科大学第一附属医院',
        tabs: ['7'],
        image:logo,
        address:"广西壮族自治区南宁市青秀区民族大道22号",
        contact:"电话：0771-5353042",
        description:"",
      },
      { content: '广西医科大学附属肿瘤医院',
        tabs: ['7'],
        image:logo,
        address:"广西壮族自治区南宁市兴宁区大学路21号",
        contact:"电话：0771-5353110",
        description:"",
      },
      { content: '贵州医科大学附属医院',
        tabs: ['8'],
        image:logo,
        address:"贵州省贵阳市云岩区北京路28号",
        contact:"电话：0851-86890120",
        description:"",
      },
      { content: '贵州省人民医院',
        tabs: ['8'],
        image:logo,
        address:"贵州省贵阳市云岩区北京西路83号",
        contact:"电话：0851-86803888",
        description:"",
      },
      { content: '海南省人民医院',
        tabs: ['9'],
        image:logo,
        address:"海南省海口市龙华区滨海大道19号",
        contact:"电话：0898-66736673",
        description:"",
      },
      { content: '海南医学院附属医院',
        tabs: ['9'],
        image:logo,
        address:"海南省海口市琼山区中山路3号",
        contact:"电话：0898-66889761",
        description:"",
      },
      { content: '河北医科大学第四医院',
        tabs: ['10'],
        image:logo,
        address:"河北省石家庄市裕华区长安街169号",
        contact:"电话：0311-86095888",
        description:"",
      },
      { content: '河北省人民医院',
        tabs: ['10'],
        image:logo,
        address:"河北省石家庄市桥西区胜利北大街389号",
        contact:"电话：0311-86995114",
        description:"",
      },
      // ...more cards
    ]);
    let activeTab = ref('1');
    let activePage = ref(1);
    const pageSize = 5;

    const filteredCards = computed(()=>{
      if(activeTab.value.includes('all')){
        return  cards.value;
      }else{
        return cards.value.filter(card => {
          // return card.tabs.includes(activeTab.value) && card.filter === someCondition;
          return card.tabs.some(tab => activeTab.value.includes(tab));
        });
      }
    });

    const currentCards = computed(()=> {
      const start = (activePage.value - 1) * pageSize;
      return filteredCards.value.slice(start, start + pageSize);
    });

    const handlePageChange = (page)=>{
      activePage.value = page;
    };

    const searchText = ref('');

    const handleSearch = () => {
      // 处理搜索逻辑
      console.log('搜索：', searchText.value);
    };

    const handleClear = () => {
      searchText.value = '';
    };

    return {
      tabs,
      activeTab,
      cards,
      currentCards,
      pageSize,
      filteredCards,
      searchText,
      handleSearch,
      handleClear,
      handlePageChange}
  },

  mounted() {
    const scrollbarRef = this.$refs.scrollbarRef.$el;
    scrollbarRef.addEventListener("wheel", this.handleMouseWheel);
  },
  methods: {
    handleMouseWheel(event) {
      event.stopPropagation();
      event.preventDefault();

      const scrollbarWrapper = this.$refs.scrollbarRef.$el;
      const contentWrapper = scrollbarWrapper.querySelector(
          ".el-scrollbar__wrap"
      );

      const delta = Math.sign(event.deltaY) * 100;
      contentWrapper.scrollTop += delta;
    },
  },

}
</script>

<style>
.container {
  display: flex;
}

.tabsWrapper {
  width: 200px;
  margin-right: 10px;
}


.cardsWrapper {
  margin-left: 50px;
}

.scrollbar-wrapper {
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
}

.box-card {
  width: 1000px;
  margin-top: 10px;
  transition: transform 0.3s;
}

.box-card:hover {
  transform: scale(1.05);
}

.card-content {
  display: flex;
}

.image-wrapper {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-wrapper {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.card-metadata {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}

.search-wrapper {
  width: 500px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

</style>
